.calendar-wrap {
    height: 100%;
    display: flex;
    opacity: 0;
    transition: .3s;
}

.calendar-wrap-left {
    margin-top: 8px;
    /* width: 14%; */
    height: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.calendar-wrap-left-top {
    display: flex;
    flex-direction: column;
    /* width: 90%; */
    margin-right: 20px;
    margin-left: 20px;
    /* margin: auto; */
}

.calendar-wrap-left-top div {
    width: 227px;
    height: 40px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}

.calendar-wrap-left-middle {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #E4E4E4;
    margin-top: 14px;
    width: 100%;
    align-items: center;
}

.calendar-wrap-left-list {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    border: 1px solid #C9C9C9;
    border-radius: 6px;
    margin-top: 15px;
    width: 90%;
    height: 34px;
}

.calendar-wrap-left-list input {
    width: 90%;
    background: transparent;
    border: none;
    margin-right: 7px;
}

.calendar-wrap-left-list2 {
    width: 90%;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-wrap-left-list2-allow {
    display: flex;
    align-items: center;
}

.calendar-wrap-left-list2-allow div {
    width: 38px;
    height: 27px;
    background: #EDEFF0;
    border: 1px solid #CDCDCD;
    border-radius: 3px 0px 0px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9F9F9F;
    font-size: 16px;
    cursor: pointer;
}

.calendar-wrap-left-list3 {
    width: 90%;
    margin-top: 15px;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #D3D3D3;
}

.calendar-wrap-left-list3 div {
    width: 100%;
    user-select: none;
    height: 28px;
    /* background: #8A949E; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-wrap-left-list4 {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 90%;
    margin-top: 13px;
    justify-items: center;
}

.calendar-wrap-left-list4 div {
    width: 100%;
    user-select: none;
    height: 28px;
    /* background: #8A949E; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

}

.calendar-wrap-left-list4 div:hover {
    background: #8A949E !important;
    color: white;
    border-radius: 3px;
}

.calendar-today {
    background: #8A949E !important;
    color: white;
    border-radius: 3px;
}

.calendar-week {
    background: #E3E6E8;
}

.calendar-week:last-of-type {
    border-radius: 3px 0px 0px 3px;
}

.last-allow,
.right-allow {
    user-select: none;
}

.calendar-wrap-left-list5 {
    display: flex;
    flex-direction: column;
    width: 90%;
    align-items: center;
    margin-top: 15px;
}

.calendar-wrap-left-list6 {
    display: flex;
    width: 95%;
    align-items: center;
    margin-top: 15px;
}

.calendar-wrap-right {
    flex: 1;
    background: white;
    height: 100vh;
    max-height: 100vh;
    overflow-y: scroll;
}

.calendar-wrap-right-top {
    padding-top: 19px;
    padding-left: 13px;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.calendar-wrap-right-middle {
    display: flex;
    margin-top: 19px;
    border-top: 1px solid #DADADA;
    height: 30px;
    align-items: center;
    border-bottom: 1px solid #DADADA;
}

.calendar-wrap-right-middle div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-wrap-right-bottom {
    display: flex;
    flex: 1;
    max-height: 100vh;
    overflow-y: scroll;
}


.calendar-wrap-right-bottom-list1 {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100% !important;
}

.calendar-wrap-right-bottom-list1 div {
    height: 110px;
    /* flex: auto; */
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid white;
}

.calendar-wrap-right-bottom-list2 {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100% !important;
    background: #F4F6F6;
    max-height: 100%;
}

.calendar-wrap-right-bottom-list3 {
    display: flex;
    flex: auto;
    height: 110px;
    flex-direction: column;
    align-items: center;
    border-left: 1px solid #C7C7C7;
    justify-content: center;
    border-bottom: 1px solid #C7C7C7;
}


.calendar-wrap-right-bottom-list3-top {
    border-bottom: 1px dashed #D6D6D6;
    width: 100%;
    color: white;
    height: 50%;
}

.calendar-wrap-right-bottom-list3-top div{
    margin-left: 13px;
    margin-top: 7px;
}

.calendar-wrap-right-bottom-list3-bottom{
    width: 100%;
    height: 50%;
}

.calendar-wrap-right-bottom-list3-has{
    border-bottom: none;
}

.calendar-sure{
    width: 112px;
    height: 30px;
    background: #FFFFFF;
    border: 1px solid #6EA3F9;
    border-radius: 3px;
    cursor: pointer;
    display: none;
    margin-left: 284px;
    color: #4580FE;
    align-items: center;
    justify-content: center;
}

.calendar-sure:hover{
    background-image: linear-gradient(to right, #ffc3a0 0%, #ffafbd 100%);
    color: white;
}

.active-edit-class,.active-set-class,.active-add-class{
    cursor: pointer;
}

.active-edit-class:hover{
    background:  #B2DA78;
    /* background: linear-gradient(-90deg, #A1C4FD, #C2E9FB); */
}

.active-set-class:hover{
    background:  #B2DA78;
    /* background: linear-gradient(-90deg, #FFE8CE, #FBB8A0); */
}

.active-add-class:hover{
    background: linear-gradient(-90deg, #C7CED8, #9FAAB7);
}


.active-edit-class:hover .calendar-wrap-right-bottom-list3-top,.active-set-class:hover .calendar-wrap-right-bottom-list3-top,.active-add-class:hover .calendar-wrap-right-bottom-list3-top{
    border-bottom : none;
}

.aside-calendar-blur{
    color:#767676;
}